<!--公共头部-->
{template 'aitimt/common/header'}
	<style>
		* {touch-action: pan-y;}
		body{background-color: #FFFFFF;}
		.mui-control-content {background-color: white;}
		.mui-control-content .mui-loading {margin-top: 3.125rem;}
		.mui-table-view .mui-media-object{height: 6.25rem;max-width: 8.125rem;}
		.mui-bar-nav{position: absolute;background-color: #e94709;height: 8%;}
		.top-content{position: absolute;width: 100%;font-size:0.625rem;}
		.top-content img{width: 100%;}
		.top-logo {position: absolute;width: 10%;top: 0.625rem;}
		.top-message{position: absolute;width: 10%;right: 0%;top: 0.3125rem;}
		.top-return {position: absolute;width: 10%;top: 10px;}
		.top-return img{width: 70%;}
		.mui-input-row{overflow: unset;left: 10%;}
		.mui-search input[type=search] {background-color: #f0774a;width: 70%;border-radius: 3.125rem;height: 2.5625rem;color: #ffffff;}
		.mui-active::before{color: #FFFFFF;}
		.mui-search .mui-placeholder{line-height: 2.5rem;font-size: 0.5375rem;width: 45%;color: #FFFFFF;}
		.search-icon{background-color: #fad6c8;position: absolute;top: 0.375rem;right: 30%;width: 15%;text-align: center;border: 0;height: 2.5625rem;color: #e94709;border-radius: 1.25rem;overflow: hidden;}
		.mui-slider .mui-slider-group .mui-slider-item{width: 105%;padding-right: 1.25rem;}
		.mui-slider .mui-slider-group .mui-slider-item img{width: 90%;margin-top:4% ;margin-left: 5%;border-radius: 1.25rem;}
		.mui-slider{margin-top:3rem ;z-index: 15;overflow: unset;}
		.mui-slider-indicator{bottom: -1.25rem;}
		.mui-slider-indicator .mui-active.mui-indicator{background: #ea4609;}
		.mui-slider-indicator .mui-indicator{background: #ffcebd;}
		.mui-indicator .mui-active{background-color:#000000;}
		.mui-search .mui-placeholder{color: #FFFFFF;}
		.mui-search .mui-placeholder .mui-icon{color: #FFFFFF;line-height: 1.875rem;margin-left: -3.125rem;}
		.mui-slider-indicator.mui-segmented-control .mui-control-item {border-left:1px solid #c1c1c1 ;padding: 0 22.5%;color: #585858;}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color: #585858;border-bottom: 0;}
		.mui-bar-tab .mui-tab-item.mui-active{color: #ea4609;}
		.mui-bar-nav~.mui-content{margin-bottom: 10%;margin-top: 5%;}
		.mui-table-view .mui-media-object{max-width: 40%;}
		.mui-content{background-color: #FFFFFF;}
		.addtime{padding-top: 0.625rem;font-size: 0.625rem;}
		.hot-recom{background: #FFFFFF;display: inline-block;}
		.hot-list{width: 95%;margin-left: 5%;}
		.hot-more{color: #8f8f94;}
		.hot-item {width: 45%;float: left;margin-right: 5%;}
		.hot-item img{width: 100%;height: 8rem;}
		.wonder-more{color: #8f8f94;}
		.wonder-list{width: 95%;margin-left: 5%;}
		.wonder-item {width: 100%;margin-right: 5%;}
		.wonder-item img{width: 95%;height: 8rem;}
		.mui-icon{font-size: 18px;}
		.mui-content{position: absolute;width: 100%;}
		.bottom-remind{width: 100%;text-align: center;padding-top: 10%;padding-bottom: 20%;font-size: 15px;color: #969696;}
	</style>
		<header class="mui-bar mui-bar-nav">
			<div class="top-content">
				<a class="top-return mui-action-back"><img src="{$aideUrl}app/resource/aitimt/images/return.png" ></a>
				<div class="mui-input-row mui-search">
					<input type="search" class="mui-input-clear" placeholder="搜索视频">
					<button type="button" class="search-icon">搜索</button>
				</div>


			</div>

		</header>
		<div class="mui-content">

		<div class="hot-recom">
			<p style="padding: 2% 5% ;font-size: 17px;background: #eeeeee;">
			<span class="hot-title">热门推荐</span>
			<a href="#" class="hot-more"><span  style="float: right;">更多></span>	</a>
			</p>
			<div class="hot-list">
				<div  class="hot-item">
						<img src="{$aideUrl}app/resource/aitimt/images/nophoto.png" controls="controls">
						<p><span>2020泰国清迈</span><span style="float: right;"><span class="mui-icon mui-icon-videocam"></span>2504</span></p>
				</div>
				<div  class="hot-item">
						<img src="{$aideUrl}app/resource/aitimt/images/nophoto.png" controls="controls">
						<p><span>2020泰国清迈</span><span style="float: right;"><span class="mui-icon mui-icon-videocam"></span>2504</span></p>
				</div>


			</div>

		</div>
		<div class="wonder-recom">
			<p style="padding: 2% 5% ;font-size: 17px;background: #eeeeee;">
			<span class="wonder-title">精彩播放</span>
			<a href="#" class="wonder-more"><span  style="float: right;">更多></span>	 </a>
			</p>
			<div class="wonder-list">
				<div  class="wonder-item">
					<img src="{$aideUrl}app/resource/aitimt/images/nophoto.png" controls="controls">
					<p><span>2020泰国清迈</span><span style="float: right; margin-right: 5%;"><span class="mui-icon mui-icon-videocam"></span>2504</span></p>
				</div>
				<div  class="wonder-item">
					<img src="{$aideUrl}app/resource/aitimt/images/nophoto.png" controls="controls">
					<p><span>2020泰国清迈</span><span style="float: right; margin-right: 5%;"><span class="mui-icon mui-icon-videocam"></span>2504</span></p>
				</div>
				<div  class="wonder-item">
					<img src="{$aideUrl}app/resource/aitimt/images/nophoto.png" controls="controls">
					<p><span>2020泰国清迈</span><span style="float: right; margin-right: 5%;"><span class="mui-icon mui-icon-videocam"></span>2504</span></p>
				</div>
				<div  class="wonder-item">
					<img src="{$aideUrl}app/resource/aitimt/images/nophoto.png" controls="controls">
					<p><span>2020泰国清迈</span><span style="float: right; margin-right: 5%;"><span class="mui-icon mui-icon-videocam"></span>2504</span></p>
				</div>

			</div>
			<div class="bottom-remind">已显示全部内容</div>
		</div>
		</div>
<!-- 公共底部start -->
{template 'aitimt/common/nav'}
<!-- 公共底部end -->

	</body>

</html>
